<template>
	<div class="kaochangguanli flex">
    <left></left>
    <div style="width: calc(100vw - 280px); height: calc(100vh - 40px); overflow: auto; padding: 20px;">

      <div style="margin-bottom: 20px;"><el-button @click="fuzhi()" type="primary">复制推广链接</el-button></div>

      <div style="margin-bottom: 20px;"><el-button @click="fuzhi()" type="primary">生成推广二维码</el-button></div>


    </div>

    <el-dialog  title="复制推广链接"  :visible.sync="log"  width="400px" :close-on-click-modal="false" :close-on-press-escape="false">

      <el-select v-model="search.saishiid"  style="width: 250px; margin-bottom: 20px; margin-right: 20px;" placeholder="请选择赛事">
          <el-option :label="item.name" :value="item.id" v-for="(item,index) in saishis" :key="item.id"></el-option>
      </el-select>
      <el-select v-model="search.qudaoid"  style="width: 250px; margin-right: 20px;" placeholder="请选择渠道">
          <el-option :label="item.channel_name" :value="item.id" v-for="(item,index) in qudaos" :key="item.id"></el-option>
      </el-select>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round style="margin-bottom: 20px;" @click='copyText()'>复制pc推广链接</el-button>
        <el-button type="primary" round style="margin-bottom: 20px;" @click='shengcheng()'>生成pc推广二维码</el-button>

        <el-button type="primary" round @click='copyText2()'>复制h5推广链接</el-button>
        <el-button type="primary" round @click='shengcheng2()'>生成h5推广二维码</el-button>
      </div>

    </el-dialog>

    <el-dialog title="生成推广二维码" :visible.sync="log3" width="340px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div style="text-align: center; font-size: 16px; " >
        <div class="qrcode" ref="qrCodeUrl" style="margin: 0 auto; max-width: 100%;"></div>
      </div>
    </el-dialog>

	</div>
</template>

<script>

  import QRCode from 'qrcodejs2'
  import left from '../left.vue'
	export default {
		name: 'kaochangguanli',
    components:{
      left
    },
		data() {
			return {
        log3:false,
        log:false,
        qudaos:[],
        saishis:[],
        search:{
          saishiid:"",
          qudaoid:""
        }

			}
		},
		created() {
      this.getlist()
		},
		mounted() {

		},
		methods: {

      xiazai:function(){

      },
      fuzhi:function(){
        this.search = {
          saishiid:"",
          qudaoid:""
        }
        this.log = true
      },
      shengcheng:function(){
        //成功后生成二维码
        this.log3 = true
        this.$nextTick(()=>{
          this.creatQrCode()
        })
      },
      creatQrCode() {
        this.$refs.qrCodeUrl.innerHTML = '';
        axios.post(this.IP_URL+'/api/competition/shortchain',{url:window.origin + '/pc/saishijieshao/detail?id='+this.search.saishiid+'&channel_code='+this.search.qudaoid}).then((response)=>{
        	if (response.data.msg.code == 0) {
            var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: response.data.data.shorturl,
                wwidth: 300,
                height: 300,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
        // var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        //     text: window.origin + '/pc/saishijieshao/detail?id='+this.search.saishiid+'&channel_code='+this.search.qudaoid,
        //     width: 300,
        //     height: 300,
        //     colorDark: '#000000',
        //     colorLight: '#ffffff',
        //     correctLevel: QRCode.CorrectLevel.H
        // })
      },
      copyText() {
        // console.log(this.search)
        // const textToCopy = window.origin + '/pc/saishijieshao/detail?id='+this.search.saishiid+'&channel_code='+this.search.qudaoid
        // navigator.clipboard.writeText(textToCopy);
        // console.log(textToCopy);
        // this.$message.success("复制成功");

        const textToCopy = window.origin + '/pc/saishijieshao/detail?id='+this.search.saishiid+'&channel_code='+this.search.qudaoid
        axios.post(this.IP_URL+'/api/competition/shortchain',{url:textToCopy}).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.$copyText(response.data.data.shorturl)
        		this.$message.success('复制成功')
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })



      },

      shengcheng2:function(){
        //成功后生成二维码
        this.log3 = true
        this.$nextTick(()=>{
          this.creatQrCode2()
        })
      },
      creatQrCode2() {
        this.$refs.qrCodeUrl.innerHTML = '';

        let url = location.origin + '/h5/bisai/detail?id='+this.search.saishiid+'&channel_code='+this.search.qudaoid
        const textToCopy = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd9e4d5f151960619&redirect_uri=" + encodeURIComponent(url) + "&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect";
        axios.post(this.IP_URL+'/api/competition/shortchain',{url:textToCopy}).then((response)=>{
        	if (response.data.msg.code == 0) {
            var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: response.data.data.shorturl,
                width: 300,
                height: 300,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })


      },
      copyText2() {
        // let url = location.origin + '/h5/bisai/detail?id='+this.search.saishiid+'&channel_code='+this.search.qudaoid
        // const textToCopy = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd9e4d5f151960619&redirect_uri=" + encodeURIComponent(url) + "&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect";
        // navigator.clipboard.writeText(textToCopy);
        // console.log(textToCopy);
        // this.$message.success("复制成功");
        let url = location.origin + '/h5/bisai/detail?id='+this.search.saishiid+'&channel_code='+this.search.qudaoid
        const textToCopy = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd9e4d5f151960619&redirect_uri=" + encodeURIComponent(url) + "&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect";

        axios.post(this.IP_URL+'/api/competition/shortchain',{url:textToCopy}).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.$copyText(response.data.data.shorturl)
        		this.$message.success('复制成功')
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })

        // let url = location.origin + '/h5/bisai/detail?id='+this.search.saishiid+'&channel_code='+this.search.qudaoid
        // const textToCopy = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd9e4d5f151960619&redirect_uri=" + encodeURIComponent(url) + "&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect";
        // this.$copyText(textToCopy)
        // this.$message.success('复制成功')
      },

      getlist:function(){
        axios.get(this.IP_URL+'/api/enrolment/channellist').then((response)=>{
        	if (response.data.msg.code == 0) {

        		this.qudaos = response.data.data
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })

        axios.get(this.IP_URL+'/admin/competition/list',{params:{page:1,page_size:2000}}).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.saishis = response.data.data.data
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      }
		}
	}
</script>


<style scoped >

</style>
